`:top
`!Backbone.js`! ist eine `F33f`_`[JavaScript`:/page/entry.mu`zim=wikipedia_de_all_nopic_2026-01.zim|entry_path=JavaScript]`_`f-`F33f`_`[Bibliothek`:/page/entry.mu`zim=wikipedia_de_all_nopic_2026-01.zim|entry_path=Programmbibliothek]`_`f mit `F33f`_`[RESTful`:/page/entry.mu`zim=wikipedia_de_all_nopic_2026-01.zim|entry_path=Representational_State_Transfer]`_`f-`F33f`_`[JSON`:/page/entry.mu`zim=wikipedia_de_all_nopic_2026-01.zim|entry_path=JavaScript_Object_Notation]`_`f-Schnittstelle. Backbone basiert auf dem `F33f`_`[Model-View-Controller`:/page/entry.mu`zim=wikipedia_de_all_nopic_2026-01.zim|entry_path=Model_View_Controller]`_`f-Muster (MVC). Backbone ist für seine geringe Größe bekannt und nur von der JavaScript-Bibliothek`:cite-ref-3[`F5bf`_`[3`#cite-note-3]`_`f] `F33f`_`[Underscore.js`:/page/entry.mu`zim=wikipedia_de_all_nopic_2026-01.zim|entry_path=Underscore.js]`_`f abhängig. Backbone wird zur Programmierung von `F33f`_`[Single-Page-Webanwendungen`:/page/entry.mu`zim=wikipedia_de_all_nopic_2026-01.zim|entry_path=Single-Page-Webanwendung]`_`f und zur Synchronität von `F33f`_`[Webanwendungen`:/page/entry.mu`zim=wikipedia_de_all_nopic_2026-01.zim|entry_path=Webanwendung]`_`f (z. B. verschiedene Clients und Server) verwendet. Backbone wurde von `F33f`_`[Jeremy Ashkenas`:/page/entry.mu`zim=wikipedia_de_all_nopic_2026-01.zim|entry_path=Jeremy_Ashkenas]`_`f geschaffen, der ebenso der initiale Autor von `F33f`_`[CoffeeScript`:/page/entry.mu`zim=wikipedia_de_all_nopic_2026-01.zim|entry_path=CoffeeScript]`_`f ist.
>>Contents
• `F0af`_`[Architekturvorgaben`#architekturvorgaben]`_`f
• `F0af`_`[Konzept`#konzept]`_`f
• `F0af`_`[Vorkommen`#vorkommen]`_`f
• `F0af`_`[Siehe auch`#siehe-auch]`_`f
• `F0af`_`[Literatur`#literatur]`_`f
• `F0af`_`[Weblinks`#weblinks]`_`f
• `F0af`_`[Einzelnachweise`#einzelnachweise]`_`f
-─
>>Architekturvorgaben
Eine Backbone-Anwendung besteht aus den Elementen Model, Collection, View und Router. Das Interaktionsmuster von Backbone kann dem `F33f`_`[MVC`:/page/entry.mu`zim=wikipedia_de_all_nopic_2026-01.zim|entry_path=Model_View_Controller]`_`f-Muster zugeordnet werden. Model und View werden gemäß dem MVC-Muster umgesetzt. Allerdings fehlen konkrete Controller-Instanzen bei der Umsetzung. Dies hat folgende Gründe:
• Der Router übernimmt die Aufgaben eines „Front Controllers“. Ein solcher Controller dient als Ereignissenke und Einstiegspunkt für alle eingehenden Anfragen an eine Webseite. Der Front Controller adressiert bei Backbone unmittelbar die jeweils verantwortliche View.
• Die View einer Backbone-SPA übernimmt neben der Darstellung ebenfalls die Aufgabe der Ereignisbehandlung. Bei einem traditionellen MVC-Muster werden alle Aktionen im Rahmen der View zum jeweils verantwortlichen Controller weitergeleitet. Auf diese View/Controller-Separation wird bei Backbone-Anwendungen verzichtet. Der klassische Grund für die View/Controller-Separation liegt darin, dass die jeweiligen Verhaltensstrategien über verschiedene Controller ausgetauscht werden können. Ein Beispiel hierfür kann ein editierbares und nicht editierbares Verhalten sein. Durch den Verzicht auf explizite Controller-Instanzen wird der Implementierungsaufwand reduziert.
>>Konzept
Backbone gibt vier verschiedene Strukturierungselemente zur Realisierung einer `F33f`_`[Single-Page-Webanwendung`:/page/entry.mu`zim=wikipedia_de_all_nopic_2026-01.zim|entry_path=Single-Page-Webanwendung]`_`f vor. Das Fachmodell wird clientseitig durch Model und Collection-Klassen abgebildet. Bei Backbone beinhalten die Model-Objekte die Fachkonzeptdaten sowie Programmlogiken, welche direkt auf eine Model-Instanz operieren. Dies kann beispielsweise eine Datenvalidierung des Modells, die Definition von abgeleiteten Attributen, Zugriffskontrollen oder eine andere fachliche Funktionalität sein. Der nachfolgende Codeausschnitt zeigt die Implementierung eines Modells. Backbone bietet hierzu die Oberklasse `B100`F9d9Backbone.Model`f`b an. Über die Methode `B100`F9d9extend`f`b kann eine Unterklassendefinition erzeugt werden.
`B100`F9d9Modelldefinition in Backbone:`f`b
`B100`F9d9var Person = Backbone.Model.extend({`f`b
`B100`F9d9 urlRoot: '/persons',`f`b
`B100`F9d9 defaults: {`f`b
`B100`F9d9 firstname: '',`f`b
`B100`F9d9 name: '',`f`b
`B100`F9d9 isReadonly: false`f`b
`B100`F9d9 },`f`b
`B100`F9d9 initialize: function() {`f`b
`B100`F9d9 console.log('Konstruktur-Code');`f`b
`B100`F9d9 },`f`b
`B100`F9d9 validate: function(attribs) {`f`b
`B100`F9d9 if (attribs.name === undefined || attribs.name === '') {`f`b
`B100`F9d9 return 'Bitte einen Namen angeben.';`f`b
`B100`F9d9 }`f`b
`B100`F9d9 },`f`b
`B100`F9d9 allowedToEdit: function() {`f`b
`B100`F9d9 return !this.get('isReadonly');`f`b
`B100`F9d9 }`f`b
`B100`F9d9});`f`b
Diese Oberklasse liefert verschiedene Basisoperationen zum Umgang mit einem Model. Hierzu gehören beispielsweise die Methoden get und set zum Abrufen und Setzen von Attributen. Die Oberklasse definiert ebenfalls ein ID-Attribut zur Adressierung der Objekte. Bei clientseitig neu erfassten Objekten erfolgt eine temporäre Vergabe einer Client-ID. Über die `B100`F9d9urlRoot`f`b-Angabe kann definiert werden, unter welcher URL das Modell serverseitig verwaltet wird. Wenn der verwendete Webdienst eine `F33f`_`[REST-konforme API`:/page/entry.mu`zim=wikipedia_de_all_nopic_2026-01.zim|entry_path=Representational_State_Transfer]`_`f besitzt, so kann die komplette Client-Server-Kommunikation selbstständig von Backbone durchgeführt werden. Durch einen Aufruf der `B100`F9d9save`f`b-Methode auf dem Model wird die Synchronisation gestartet.
Collections sind ein weiteres Strukturierungselement zur Abbildung des Fachkonzepts. Eine Collection verwaltet eine Menge von Model-Instanzen. Die logische Typisierung einer Collection erfolgt über das model-Attribut. Hierdurch kann Backbone erkennen, welche Art von Model-Instanz verwaltet wird. Wie bei der Model-Oberklasse werden verschiedene Basisfunktionalitäten von der Backbone.Collection-Klasse geerbt. Hierzu gehören beispielsweise die Funktionen `B100`F9d9add`f`b, `B100`F9d9remove`f`b und `B100`F9d9sort`f`b zur Verwaltung der Listenelemente. Für die Definition einer Standardsortierung innerhalb einer `B100`F9d9Collection`f`b kann die Methode `B100`F9d9comparator`f`b implementiert werden. Ebenfalls angeboten wird die filter-Methode zur Filterung von Listenelementen.
`B100`F9d9Collection-Definition in Backbone:`f`b
`B100`F9d9var PersonCollection = Backbone.Collection.extend({`f`b
`B100`F9d9 url: '/persons',`f`b
`B100`F9d9 model: Person,`f`b
`B100`F9d9 onlyEditable: function() {`f`b
`B100`F9d9 return this.filter(function(person) {`f`b
`B100`F9d9 return person.allowedToEdit();`f`b
`B100`F9d9 });`f`b
`B100`F9d9 },`f`b
`B100`F9d9 comparator: function(person) {`f`b
`B100`F9d9 return person.get('name');`f`b
`B100`F9d9 }`f`b
`B100`F9d9});`f`b
Ebenfalls möglich ist die Angabe einer URL zum serverseitigen Abruf der Daten. Ausgeführt wird der Abruf der Listenelemente einer Collection durch die fetch-Methode der Basisklasse. Als drittes Element in einer Backbone-Anwendung ist der Router aufzuführen. Der Router ist für die clientseitige Navigation innerhalb der SPA verantwortlich. Für eine SPA-Anwendung wird eine Router-Instanz erzeugt. Diese Instanz verwaltet sämtliche Linkaktionen innerhalb der Anwendung. Hierdurch ist ebenfalls eine Navigation über die Webbrowser-Schaltflächen möglich. Als Nebenprodukt entstehen zusätzlich bookmarkfähige Links. Der nachfolgende Codeausschnitt veranschaulicht die Implementierung eines Routers mit Backbone. Hierbei wird von der Oberklasse `B100`F9d9Backbone.Router`f`b geerbt. Zu erkennen ist, dass über das interne routes-Objekt des Routers die verschiedenen URLs festgelegt werden. Diese internen Adressen können ebenfalls GET-Parameter beinhalten, um einen parametrisieren Webseitenaufruf im Rahmen der SPA nachzubilden. Die Einträge im `B100`F9d9routes`f`b-Objekt werden von Backbone nach dem First-Match-Verfahren abgearbeitet.
`B100`F9d9Beispiel einer Router-Definition mit Backbone:`f`b
`B100`F9d9var Router = Backbone.Router.extend({`f`b
`B100`F9d9 routes: {`f`b
`B100`F9d9 "": "home",`f`b
`B100`F9d9 "edit/:id": "edit",`f`b
`B100`F9d9 "new": "edit"`f`b
`B100`F9d9 },`f`b
`B100`F9d9 // Aktionsdefinition bei der home-Navigation`f`b
`B100`F9d9 home: function() {`f`b
`B100`F9d9 userListView.render();`f`b
`B100`F9d9 },`f`b
`B100`F9d9 // Aktionsdefinition bei der new- und edit-Navigation`f`b
`B100`F9d9 edit: function(id) {`f`b
`B100`F9d9 userEditView.render({id: id});`f`b
`B100`F9d9 }`f`b
`B100`F9d9});`f`b
`B100`F9d9// Aktivierung der globalen Linkbehandlung mit Backbone + History API`f`b
`B100`F9d9Backbone.history.start({pushState: true});`f`b
Die View in einer Backbone-Anwendung beinhaltet keinen HTML-Code. Sie beinhaltet Präsentationslogik zur Reaktion auf Benutzereingaben und ist für DOM-Manipulationen verantwortlich. Die eigentliche Darstellung erfolgt durch die HTML-View. Die HTML-View wird allerdings häufig bei einer SPA von der View aus mit Inhalten aus dem clientseitigen Model befüllt. Hierbei kommt die Template-Technik von Underscore zum Einsatz. Die Ausdrücke der Templatesprache erlauben eine einfache clientseitige Generierung von HTML-Inhalten auf Basis von Modellinformationen. Diese Templates können Bestandteile der Bootstrapper-Seite der SPA sein oder mittels der Text-Erweiterung von `F33f`_`[RequireJS`:/page/entry.mu`zim=wikipedia_de_all_nopic_2026-01.zim|entry_path=RequireJS]`_`f asynchron nachgeladen werden. Backbone gibt im Rahmen der View drei Konventionen vor. Die erste Konvention bezieht sich auf das Haupt-DOM-Element, welches im Rahmen der aktuellen View verwaltet wird. Der CSS-Selektor für dieses DOM-Element soll in der Variable `B100`F9d9el`f`b abgelegt werden. Falls `F33f`_`[jQuery`:/page/entry.mu`zim=wikipedia_de_all_nopic_2026-01.zim|entry_path=JQuery]`_`f verwendet wird, so legt die Backbone-Infrastruktur automatisch einen Cache für das DOM-Objekt mit dem Namen `B100`F9d9$el`f`b an. Dies reduziert ständige DOM-Selektionen über jQuery und erhöht so die Performance. Für den Fall, dass das Haupt-DOM-Element für den aktuellen View-Bereich noch nicht existiert, kann die Variable `B100`F9d9tagName`f`b verwendet werden. In diesem Fall erzeugt die Backbone-Infrastruktur selbstständig ein neues DOM-Element. Diese Variante wird häufig verwendet, wenn die aktuelle Ansicht von verschiedenen partiellen View-Instanzen verwaltet wird. Dieses Vorgehen wird beispielsweise bei Auflistungen gewählt. In diesem Fall repräsentiert eine View die Liste. Zusätzlich werden für jeden Eintrag in der Liste partielle Views erzeugt. Auf diese Weise können die Funktionalitäten, die ein Listeneintrag anbietet, von den Funktionalitäten der kompletten Liste abgekapselt werden. Ein Listeneintrag kann z. B. ein direktes Löschen oder eine Bearbeitung des Eintrags anbieten.
`B100`F9d9Beispiel für eine View-Implementierung:`f`b
`B100`F9d9var UserListView = Backbone.View.extend({`f`b
`B100`F9d9 el: '.page',`f`b
`B100`F9d9 template: _.template($('#user-list-template').html()),`f`b
`B100`F9d9 events: {`f`b
`B100`F9d9 'click .refresh': 'loadAndDisplayData' // Click-Aktion auf $('.refresh')`f`b
`B100`F9d9 },`f`b
`B100`F9d9 loadAndDisplayData: function() {`f`b
`B100`F9d9 userCollection.fetch(); // Impliziert ein reset-Event auf der Collection`f`b
`B100`F9d9 },`f`b
`B100`F9d9 initialize: function() {`f`b
`B100`F9d9 // Registrierung für Events der “userCollection”`f`b
`B100`F9d9 this.listenTo(userCollection, 'add', this.addOneItem);`f`b
`B100`F9d9 this.listenTo(userCollection, 'reset', this.addAllItems);`f`b
`B100`F9d9 },`f`b
`B100`F9d9 addOneItem: function(user) {`f`b
`B100`F9d9 var view = new UserListItemView({model: user }); // Partielle View erzeugen`f`b
`B100`F9d9 $('#userListBody').append(view.render().el); // Eintrag der Liste hinzufügen`f`b
`B100`F9d9 },`f`b
`B100`F9d9 addAllItems: function() {`f`b
`B100`F9d9 this.$el.find('#userListBody').html(''); // Liste leeren`f`b
`B100`F9d9 userCollection.each(this.addOneItem, this); // Alle Elemente neu hinzufügen`f`b
`B100`F9d9 },`f`b
`B100`F9d9 render: function() {`f`b
`B100`F9d9 this.$el.html(this.template); // Haupt-Template der Seite hinzufügen`f`b
`B100`F9d9 if (!userCollection.length) {`f`b
`B100`F9d9 this.loadAndDisplayData(); // Einträge laden und anzeigen`f`b
`B100`F9d9 } else {`f`b
`B100`F9d9 this.addAllItems();`f`b
`B100`F9d9 };`f`b
`B100`F9d9 return this;`f`b
`B100`F9d9 }`f`b
`B100`F9d9});`f`b
Die zweite Konvention besagt, dass ein verwendetes HTML-Template in der Variable `B100`F9d9template`f`b abgelegt werden soll. Auf diese Weise kann verhindert werden, dass ein Template zum wiederholten Mal geladen wird. Die dritte Konvention sieht das Vorhandensein einer Methode mit dem Namen render vor. Diese Methode soll Basis-DOM-Manipulationen durchführen. Im oben aufgeführten Beispiel wird in der render-Methode die initiale Darstellung einer Listenansicht durch ein Template geladen. Ebenfalls wird das Laden der Listeneinträge veranlasst, falls diese nicht schon auf dem Client vorhanden sind. Die Registrierung von DOM-Events im Rahmen von Backbone-Views erfolgt über das events-Dictionary. Hierbei werden ein DOM-Selektor für das Event und eine Callback-Methode angegeben. Sobald das selektierte Event eintritt, erfolgt automatisch ein Aufruf der Callback-Methode. Die Eventbehandlung bezieht sich immer auf den DOM-Teilbaum des `B100`F9d9el`f`b-Elements.
>>Vorkommen
Folgende `F33f`_`[Webanwendungen`:/page/entry.mu`zim=wikipedia_de_all_nopic_2026-01.zim|entry_path=Webanwendung]`_`f wurden mit Backbone.js erstellt:`:cite-ref-4[`F5bf`_`[4`#cite-note-4]`_`f]
• BitTorrent.com
• `F33f`_`[Diaspora`:/page/entry.mu`zim=wikipedia_de_all_nopic_2026-01.zim|entry_path=Diaspora_(Software)]`_`f
• DocumentCloud
• `F33f`_`[Foursquare`:/page/entry.mu`zim=wikipedia_de_all_nopic_2026-01.zim|entry_path=Foursquare]`_`f
• `F33f`_`[GeoGuessr`:/page/entry.mu`zim=wikipedia_de_all_nopic_2026-01.zim|entry_path=GeoGuessr]`_`f
• `F33f`_`[Grooveshark`:/page/entry.mu`zim=wikipedia_de_all_nopic_2026-01.zim|entry_path=Grooveshark]`_`f
• `F33f`_`[Groupon`:/page/entry.mu`zim=wikipedia_de_all_nopic_2026-01.zim|entry_path=Groupon]`_`f Now
• `F33f`_`[Hulu`:/page/entry.mu`zim=wikipedia_de_all_nopic_2026-01.zim|entry_path=Hulu_(Streaminganbieter)]`_`f
• `F33f`_`[LinkedIn`:/page/entry.mu`zim=wikipedia_de_all_nopic_2026-01.zim|entry_path=LinkedIn]`_`f Mobile
• NewsBlur`:cite-ref-newsblur-5-0[`F5bf`_`[5`#cite-note-newsblur-5]`_`f]
• `F33f`_`[Pandora`:/page/entry.mu`zim=wikipedia_de_all_nopic_2026-01.zim|entry_path=Pandora_(Internetradio)]`_`f
• `F33f`_`[Seafile`:/page/entry.mu`zim=wikipedia_de_all_nopic_2026-01.zim|entry_path=Seafile]`_`f
• `F33f`_`[Sony Entertainment Network`:/page/entry.mu`zim=wikipedia_de_all_nopic_2026-01.zim|entry_path=Sony_Entertainment_Network]`_`f
• `F33f`_`[SoundCloud`:/page/entry.mu`zim=wikipedia_de_all_nopic_2026-01.zim|entry_path=SoundCloud]`_`f
• `F33f`_`[Trello`:/page/entry.mu`zim=wikipedia_de_all_nopic_2026-01.zim|entry_path=Trello]`_`f
• `F33f`_`[USA Today`:/page/entry.mu`zim=wikipedia_de_all_nopic_2026-01.zim|entry_path=USA_Today]`_`f
• `F33f`_`[WordPress`:/page/entry.mu`zim=wikipedia_de_all_nopic_2026-01.zim|entry_path=WordPress]`_`f.com
>>Siehe auch
`!JavaScript MVC Frameworks`!
• `F33f`_`[AngularJS`:/page/entry.mu`zim=wikipedia_de_all_nopic_2026-01.zim|entry_path=AngularJS]`_`f
• `F33f`_`[Ember.js`:/page/entry.mu`zim=wikipedia_de_all_nopic_2026-01.zim|entry_path=Ember.js]`_`f
• `F33f`_`[Knockout.js`:/page/entry.mu`zim=wikipedia_de_all_nopic_2026-01.zim|entry_path=Knockout.js]`_`f
• Batman.js
• Ampersand.js
>>Literatur
• Addy Osmani: Developing Backbone.js applications. 1. Auflage. O’Reilly Media, Beijing 2012, ISBN 978-1-4493-2825-2, S. 150 (englisch).
>>Weblinks
• Offizielle Website
>>Einzelnachweise
`:cite-note-changelog-1`!1.`! Change Log
`:cite-note-154a9d74d0feb826-2`!2.`! github.com.
`:cite-note-3`!3.`! `F0af`_`[↑`#cite-ref-3]`_`f Alex MacCaw: JavaScript Web Applications. O’Reilly Media, Inc., 2001, ISBN 978-1-4493-0351-8, S. 165 (eingeschränkte Vorschau in der Google-Buchsuche).
`:cite-note-4`!4.`! `F0af`_`[↑`#cite-ref-4]`_`f builtwithbackbonejs.com: `*Showcase of apps and websites using Backbone.js`* (`F33f`_`[Memento`:/page/entry.mu`zim=wikipedia_de_all_nopic_2026-01.zim|entry_path=Webarchivierung]`_`f vom 13. Mai 2015 im `*`F33f`_`[Internet Archive`:/page/entry.mu`zim=wikipedia_de_all_nopic_2026-01.zim|entry_path=Internet_Archive]`_`f`*)
`:cite-note-newsblur-5`!5.`! `F0af`_`[↑`#cite-ref-newsblur-5-0]`_`f Backbonification: migrating a large JavaScript project from DOM spaghetti to Backbone.js, Samuel Clay (NewsBlur) 13th November 2012
`c`F0af`_`[↑ Back to top`#top]`_`f`a